<template>
  <div class="link-main">    
    <div class="link-container-list">
      <!--顶部搜索 -->
      <div class="top-operate">
        <div>
          <div class="float-l">
            <el-input @keyup.enter.native="handleSearch" v-model="searchKeyword" clearable placeholder="请输入直播间名称" style="width: 228px" class="mar-r-16"></el-input>
            <el-button class="group-b-left" type="primary" size="small" @click="handleSearch">查询</el-button>
            <el-button class="group-b-right" size="small" @click="resetSearch">重置</el-button>
          </div>
          <br>
        </div>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="liveList" v-loading="listLoading" element-loading-text="加载中" style="width: 100%">
          <el-table-column label="直播间信息">
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p">
                <label><img :src="scope.row.cover_img" class="user-avatar"></label>
                <div class="font-14 pad-l-10">
                  <div>{{scope.row.name}}</div>
                  <div>
                    开播：<span class="category-style">{{scope.row.startDate}}</span>
                  </div>
                  <div>
                    结束：<span class="category-style">{{scope.row.endDate}}</span>
                  </div>
                  <div>
                    主播：<span class="category-style">{{scope.row.anchor_name}}</span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" width="100px" label="状态" prop="live_status">
            <template slot-scope="scope">
              {{dict.liveStatus[scope.row.live_status]}}
            </template>
          </el-table-column>
          <el-table-column align="center" width="100px" label="操作">
            <template slot-scope="scope">
              <el-button v-if="scope.row.selected" type="danger" @click="delLive(scope.row)">删除</el-button>
              <el-button v-else type="primary" @click="addLive(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>      
    </div>
    <!-- 列表分页 -->
    <div class="pagination-box">
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage"
          :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .user-avatar{
    width: 68px;
    height: 68px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }
  .category-style{
    color: #3abbdb
  }
  .link-container-list{
    margin-right: 20px;
    height: 440px;
    overflow: auto;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      width: 4px;    
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: rgba(0,0,0,0.2);
    }
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      border-radius: 0;
      background: rgba(0,0,0,0.1);
      }
  }
  .pagination-box{
    position: relative;
    z-index: 20;
  }
  .pagination{
    position: absolute;
    right: 20px;
    top: 0px;
    width: 100%;
    z-index: 3000;
  }
</style>

<script>
  import { pageLive } from '@/api/custom-page/page'
  import { getDictByGroupName } from '@/api/common/common'
  import elDragDialog from '@/directive/el-dragDialog'

  export default {
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      selectedLiveList: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        total: null,
        listLoading: true,
        searchListQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10,
          categoryName: ''
        },
        searchKeyword: '',
        liveList: [],
        dict: {}
      }
    },
    // 初始化页面
    created() {
      this.init()
      const that = this
      this.$bus.$on('updateLiveList', function() {
        that.init()
      })
      getDictByGroupName('LiveRoomDTO').then(response => {
        Object.assign(this.dict, response.data)
      })
    },
    filters: {
    },
    mounted() {
    },
    methods: {
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.init()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.init()
      },
      init() {
        this.searchListQuery.liveName = this.searchKeyword
        this.listLoading = true
        // 搜索状态
        pageLive(this.searchListQuery).then(response => {
          this.total = response.data.total
          this.liveList = response.data.records
          const selectedLiveMap = {}
          this.selectedLiveList.forEach(live => { selectedLiveMap[live.roomId] = live })
          this.liveList.forEach(live => {
            live.roomId = live.roomid
            live.selected = !!selectedLiveMap[live.roomId]
          })
          this.listLoading = false
        })
      },
      resetSearch() {
        this.searchKeyword = ''
        this.handleSearch()
      },
      handleSearch() {
        this.init()
      },
      // 选择
      addLive(row) {
        const live = this.selectedLiveList.filter(e => e.roomId === row.roomId)
        if (live.length === 0) {
          this.selectedLiveList.push(row)
          row.selected = true
        }
        this.$emit('selectLiveList', this.selectedLiveList)
      },
      // 删除
      delLive(row) {
        const liveList = this.selectedLiveList.filter(e => e.roomId !== row.roomId)
        this.selectedLiveList.splice(0, this.selectedLiveList.length)
        liveList.forEach(live => {
          this.selectedLiveList.push(live)
        })
        row.selected = false
        this.$emit('selectLiveList', this.selectedLiveList)
      }
    }
  }

</script>
